<!DOCTYPE html>
<html>
<head>
    <title>用户聊天</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.js"></script>
    <style>
        #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; }
        input { margin: 5px; }
        button { padding: 5px 10px; }
    </style>
</head>
<body>
    <h1>用户聊天 (lhr, ID: 5)</h1>
    <label>发送给专家 (ID): <input id="receiverId" value="3"></label><br>
    <input id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <button onclick="fetchMessages()">获取聊天记录</button>
    <div id="messages"></div>

    <script>
        const config = {
            token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo1LCJ1c2VybmFtZSI6ImxociIsImV4cCI6MTc0NDUyNTIzNX0.Ko8ztx5bMroYc8j-CnYQ0CUARxKQsScs4IxmVCaAqAA",
            userId: 5
        };

        const socket = io('http://s2.gnip.vip:33530', {
            query: { token: config.token }
        });

        socket.on('connect', () => {
            console.log('用户已连接');
            socket.emit('join', { token: config.token });
        });

        socket.on('status', (data) => {
            console.log('状态:', data.message);
            addMessage(`系统: ${data.message}`);
        });

        socket.on('message', (data) => {
            const msg = `${data.sender_id} 对 ${data.receiver_id}: ${data.content} (${data.timestamp})`;
            addMessage(msg);
        });

        socket.on('error', (data) => {
            console.error('错误:', data.message);
            addMessage(`错误: ${data.message}`);
        });

        function sendMessage() {
            const receiverId = document.getElementById('receiverId').value;
            const content = document.getElementById('message').value;
            if (!receiverId || !content) {
                alert('请输入专家 ID 和消息内容');
                return;
            }
            socket.emit('message', {
                token: config.token,
                receiver_id: parseInt(receiverId),
                content: content
            });
            document.getElementById('message').value = '';
        }

        function fetchMessages() {
            const receiverId = document.getElementById('receiverId').value;
            fetch(`http://s2.gnip.vip:33530/messages/${receiverId}`, {
                headers: {
                    'Authorization': `Bearer ${config.token}`
                }
            })
            .then(response => response.json())
            .then(data => {
                data.forEach(msg => {
                    addMessage(`${msg.sender_id} 对 ${msg.receiver_id}: ${msg.content} (${msg.timestamp})`);
                });
            })
            .catch(error => {
                console.error('获取聊天记录失败:', error);
                addMessage(`错误: 获取聊天记录失败`);
            });
        }

        function addMessage(msg) {
            const div = document.createElement('div');
            div.textContent = msg;
            document.getElementById('messages').appendChild(div);
            document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
        }
    </script>
</body>
</html>